<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css" rel="stylesheet" />
    <link rel="stylesheet" href="8.css" />
    <link rel="stylesheet" href="../bootstrap/bootstrap.css" />
  </head>
  <body>
    <header>
      <div class="container">
        <div class="logo">
          <a href="#"> houdurnen.com </a>
        </div>
        <nav>
          <a href="">系统学习</a>
          <a href="">实战课程</a>
          <a href="">最近更新</a>
          <a href="">话题讨论</a>
          <a href="">签到打卡</a>
        </nav>
        <div class="member">
          向军老师
          <div class="member-menu shadow-sm">
            <a href="">修改资料</a>
            <a href="">修改密码</a>
            <a href="">头像设置</a>
          </div>
        </div>
      </div>
    </header>
    <main>
      <article class="shadow-sm">
        <h1 class="">第十八章 学习DOM看这个吧，JS编程必会技能</h1>
        <ul class="lists">
          <li class="border-bottom">1 课堂介绍与学习方式</li>
          <li class="border-bottom">2 什么是DOM</li>
          <li class="border-bottom border-bottom-0">3 文档渲染与整理</li>
        </ul>
      </article>
      <aside class="card shadow-sm">
        <div class="card-header">社区小贴</div>
        <div class="card-body">后盾人是一个主张友好、分享、自由的技术交流社区。</div>
        <div class="card-footer">
          <button>发贴交流</button>
          <button>签到打卡</button>
        </div>
      </aside>
    </main>
  </body>
</html>
